<!--
 * @Author: your name
 * @Date: 2020-11-20 17:26:21
 * @LastEditTime: 2021-01-13 15:16:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\paypal\index.vue
-->
<template>
  <div class="w1200auto paypal">
    <div class="paypal_box">
      <h3 class="size24 b mb20">{{$t('Secure Checkout')}}
        <img :src="require('~/assets/image/unlocking.png')" alt="">
      </h3>
      <div class="paypal_box_line mb10">
          <div class="s6 mr40">
            <div class="s12 paypal_box_address ptb10">
              <transition v-if="!collconfig[0].isComplite" name="fade" mode="in-out">
                <div class="flex paypal_address relative s12" @click="handleChange(0)">
                  <span class="paypal_index text_c mr10 size16">1</span>
                  <span class="size24">{{$t('Shipping address')}}</span>
                  <span class="absolute paypal_address_required size12"><span class="tip">*</span>{{$t('Required fields')}}</span>
                </div>
              </transition>
              <transition name="fade" mode="out-in" v-else>
                <div class="paypal_addressInfo s12 ptb5">
                  <div class="relative mb10 flex paypal_addressInfo_txt">
                    <span class="paypal_index text_c b-inline mr10"><i class="iconfont icon-duigou size16"></i></span>
                    <span class="size24">{{$t('Shipping address')}}</span>
                    <div class="absolute paypal_addressInfo_edit ptb5 plr20 pointer theme" @click="handleEdit(0)">
                      <i class="el-icon-edit size16"></i>
                      <span class="size14">{{$t('Edit')}}</span>
                    </div>
                  </div>
                  <div class="paypal_concat ptb5 plr10 size16 f777">
                    <span class="paypal_name">{{ruleForm.firstname}}</span>
                    <span class="paypal_mobile">{{ruleForm.phone}}</span>
                    <span class="paypal_email">{{ruleForm.email}}</span>
                  </div>
                  <div class="paypal_street ptb5 plr10 size16 f777">{{ruleForm.addressOne}}, {{ruleForm.state}}, {{ruleForm.country}}</div>
                </div>
              </transition>
              <el-collapse-transition mode="in-out">
                <div class="demo-ruleForm mt10" v-if="collconfig[0].isOpen">
                  <el-form :model="ruleForm" :rules="rules" class="demo-ruleForm" ref="ruleForm" :status-icon="true">
                    <el-form-item>
                      <el-col :span="12" class="pr10">
                        <el-form-item prop="firstname" required>
                          <el-input v-model="ruleForm.firstname" :placeholder="$t('*First Name')"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" class="pl10">
                        <el-form-item prop="lastname" required>
                          <el-input v-model="ruleForm.lastname" :placeholder="$t('*Last Name')"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-form-item>
                    <el-form-item>
                      <el-col :span="12" class="pr10">
                        <el-form-item prop="email" required>
                          <el-input v-model="ruleForm.email" :placeholder="$t('*Email address')"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" class="pl10">
                        <el-form-item prop="phone">
                          <el-input v-model.number="ruleForm.phone" :placeholder="$t('*Phone number')"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-form-item>
                    <el-form-item prop="addressOne" required>
                      <el-input v-model="ruleForm.addressOne" :placeholder="$t('*Address-1')"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-input v-model="ruleForm.addressTwo" :placeholder="$t('Address-2(Optional-Apt,Suite,Etc.)')"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-col :span="12" class="pr10">
                        <el-form-item prop="city" required>
                          <el-input v-model="ruleForm.city" :placeholder="$t('*City')"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" class="pl10">
                        <el-form-item prop="state" required>
                          <el-select v-model="ruleForm.state" :placeholder="$t('*state/Province')">
                            <el-option label="us" value="shanghai"></el-option>
                            <el-option label="england" value="beijing"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-form-item>
                    <el-form-item>
                      <el-col :span="12" class="pr10">
                        <el-form-item prop="postalCode" required>
                          <el-input v-model="ruleForm.postalCode" :placeholder="$t('*Zip/Postal Code')"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" class="pl10">
                        <el-form-item prop="country" required>
                          <el-select v-model="ruleForm.country" :placeholder="$t('*Country')">
                            <el-option label="us" value="shanghai"></el-option>
                            <el-option label="england" value="beijing"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-form-item>
                    <el-form-item>
                      <el-checkbox v-model="ruleForm.billAddress">{{$t('My bill and shipping address are the same')}}</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('ruleForm')" class="bg-theme fff">{{$t('Save address to continue')}}</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-collapse-transition>
            </div>
            <div class="s12 paypal_box_method ptb10">
              <transition v-if="!collconfig[1].isComplite" name="fade" mode="in-out">
                <div class="flex paypal_address relative s12" @click="handleMethod(1)">
                  <span class="paypal_index text_c mr10 size16">2</span>
                  <span class="size24">{{$t('Shipping method')}}</span>
                </div>
              </transition>
              <transition name="fade" mode="out-in" v-else>
                <div class="paypal_addressInfo s12 ptb5">
                  <div class="relative mb10 flex paypal_addressInfo_txt">
                    <span class="paypal_index text_c b-inline mr10"><i class="iconfont icon-duigou size16"></i></span>
                    <span class="size24">{{$t('Shipping method')}}</span>
                    <div class="absolute paypal_addressInfo_edit ptb5 plr20 pointer theme" @click="handleEdit(1)">
                      <i class="el-icon-edit size16"></i>
                      <span class="size14">{{$t('Edit')}}</span>
                    </div>
                  </div>
                  <div class="paypal_method ptb5 plr10 size16 f777">
                    <div class="paypal_method_txt">
                      <span class="mr20">{{$t('Standard Express (Arrives in 8-10 days)')}}</span>
                      <span>{{$t('$')}}3.99</span>
                    </div>
                  </div>
                </div>
              </transition>
              <el-collapse-transition mode="in-out">
                <div v-if="collconfig[1].isOpen" class="mt10">
                  <el-radio v-model="paypalMethod" :label="1" class="mb20 paypal_method_radio">
                      <span class="mr20 size18 b b-inline h100">{{$t('Standard Express (Arrives in 8-10 days)')}}</span>
                      <span class="size18 b b-inline h100">{{$t('$')}}3.99</span>
                  </el-radio>
                  <el-radio v-model="paypalMethod" :label="2" class="paypal_method_radio">
                      <span class="mr20 size18 b b-inline h100">{{$t('Commercial Express (Arrives in 4-5 days)')}}</span>
                      <span class="size18 b b-inline h100">{{$t('$')}}11.99</span>
                  </el-radio>
                </div>
              </el-collapse-transition>
            </div>
            <div class="s12 paypal_box_payment ptb10" :class="{border:collconfig[1].isComplite}">
              <div class="flex paypal_payment relative s12">
                <span class="paypal_index text_c mr10 size16">
                  <i class="iconfont icon-duigou size16" v-if="paypalPayment!==0"></i>
                  <span v-else>3</span>
                </span>
                <span class="size24">{{$t('Payment')}}</span>
              </div>
              <el-collapse-transition mode="out-in">
                <div class="mt10" v-if="collconfig[1].isComplite && collconfig[0].isComplite">
                  <el-radio-group v-model="paypalPayment" class="paypal_payment_col">
                    <el-radio :label="1" class="paypal_payment_radio mr0 ptb10">
                      <img :src="require('~/assets/image/cart_logo.png')" alt="">
                      <span class="paypal_payment_txt">{{$t('Pay by Card(Stripe)')}}</span>
                    </el-radio>
                    <el-radio :label="2" class="paypal_payment_radio mr0 ptb10">
                      <img :src="require('~/assets/image/paypal_logo.png')" alt="">
                      <span class="paypal_payment_txt">{{$t('PayPalExpress Checkout')}}</span>
                    </el-radio>
                    <el-radio :label="3" class="paypal_payment_radio mr0 ptb10">
                      <img :src="require('~/assets/image/gp_logo.png')" alt="">
                      <span class="paypal_payment_txt">{{$t('Giropay')}}</span>
                    </el-radio>
                    <el-radio :label="4" class="paypal_payment_radio mr0 ptb10">
                      <img :src="require('~/assets/image/deal_logo.png')" alt="">
                      <span class="paypal_payment_txt">{{$t('iDEAL')}}</span>
                    </el-radio>
                    <el-radio :label="5" class="paypal_payment_radio mr0 ptb10">
                      <img :src="require('~/assets/image/s_logo.png')" alt="">
                      <span class="paypal_payment_txt">{{$t('SOFORT')}}</span>
                    </el-radio>
                    <el-radio :label="6" class="paypal_payment_radio mr0 ptb10">
                      <img :src="require('~/assets/image/ps_logo.png')" alt="">
                      <span class="paypal_payment_txt">{{$t('EPS')}}</span>
                    </el-radio>
                  </el-radio-group>
                </div>
              </el-collapse-transition>
            </div>
          </div>
          <div class="s5">
            <div class="paypal_box_alert plr10 ptb10 spacing">
              <h3 class="size24 b mb20">{{$t('Order Summary')}}</h3>
              <div class="paypal_product_title b mb10">1 {{$t('ITEM IN CART')}}</div>
              <ul class="paypal_product_ul mb10">
                <li class="paypal_product_li relative">
                  <div class="paypal_product_li_img mr10">
                    <img class="img" v-lazy="require('~/assets/image/1_24_7.jpg')" alt="">
                  </div>
                  <div class="paypal_product_li_title">
                    <p class="size16 mb10">Deegen</p>
                    <el-input-number class="paypal_product_li_num mb10" v-model="product.num" controls-position="right" :min="1" @change="handleNum"></el-input-number>
                  </div>
                  <div class="absolute paypal_product_li_price size16">{{$t('$')}}{{product.num * 59}}</div>
                </li>
                <li class="paypal_product_li relative">
                  <div class="paypal_product_li_img mr10">
                    <img class="img" v-lazy="require('~/assets/image/1_24_7.jpg')" alt="">
                  </div>
                  <div class="paypal_product_li_title">
                    <p class="size16 mb10">Deegen</p>
                    <el-input-number class="paypal_product_li_num mb10" v-model="product.num" controls-position="right" :min="1" @change="handleNum"></el-input-number>
                  </div>
                  <div class="absolute paypal_product_li_price size16">{{$t('$')}}{{product.num * 59}}</div>
                </li>
              </ul>
              <div class="cart_subtotal mb20">
                <h3 class="cart_subtotal_title size14 b">{{$t('Cart Subtotal')}}</h3>
                <span class="cart_subtotal_price size14">{{$t('$')}}{{product.num * 59}}</span>
              </div>
              <div class="cart_express mb20">
                <h3 class="cart_express_title size14 b">{{$t('Express - Estimated delivery: 6-8 days')}}</h3>
                <span class="cart_express_price size14">{{$t('$')}}18.95</span>
              </div>
              <div class="cart_total mb20">
                <h3 class="cart_total_title size14 b">{{$t('ORDER TOTAL')}}</h3>
                <span class="cart_total_price size14">{{$t('$')}}{{product.num * 59 + 18.95}}</span>
              </div>
              <el-button class="cart_submit text_c b pointer s12" type="primary" :disabled="isSub">{{$t('PLACE ORDER')}}</el-button>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({}) {

    return {

    }
  },
  data() {
    return {
      paypalPayment: 0,
      paypalMethod: 0,
      product: {
        num: 1
      },
      ruleForm: {
        firstname: '',
        lastname: '',
        email: '',
        phone: '',
        addressOne: '',
        addressTwo: '',
        state: '',
        postalCode: '',
        billAddress: '',
        country: ''
      },
      rules: {
        firstname: [
          { required: true, message: this.$t('请输入姓名'), trigger: 'blur' },
          { min: 3, max: 30, message: this.$t('长度在 3 到 30 个字符'), trigger: 'blur' }
        ],
        lastname: [
          { required: true, message: this.$t('请输入姓名'), trigger: 'blur' },
          { min: 3, max: 30, message: this.$t('长度在 3 到 30 个字符'), trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$t('请输入邮箱地址'), trigger: 'blur' },
          { type: 'email', message: this.$t('请输入正确的邮箱地址'), trigger: ['blur', 'change'] }
        ],
        addressOne: [
          { required: true, message: this.$t('请输入地址'), trigger: 'blur' },
        ],
        state: [
          { required: true, message: this.$t('请输入省市区'), trigger: 'blur' }
        ],
        postalCode: [
          { required: true, message: this.$t('请输入邮编'), trigger: 'blur' }
        ],
        country: [
          { required: true, message: this.$t('请输入国家'), trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '号码不能为空'},
          { type: 'number', message: '号码必须为数值'}
        ]
      },
      activeNames: [],
      collconfig: [
        {
          type: 'address',
          isOpen: false, // 是否展开
          isComplite: false // 是否完成
        },
        {
          type: 'method',
          isOpen: false, // 是否展开
          isComplite: false // 是否完成
        },
        {
          type: 'payment',
          isOpen: false, // 是否展开
          isComplite: false // 是否完成
        },
      ]
    }
  },
  computed: {
    isSub(){
      return !(this.collconfig[1].isComplite && this.collconfig[0].isComplite && this.paypalPayment !== 0)
    }
  },
  methods: {
    /**
     *@param: 
     *@description: 更改当前产品数量
     *@author: Mister Wang
     *@date: 2021-01-06 11:01:32
    */
    handleNum(currentValue, oldValue) {
      // console.log('currentValue :>> ', currentValue);
      // console.log('oldValue :>> ', oldValue);
      console.log('product.num :>> ', this.product.num);
    },
    /**
     *@param: val >> 展开索引
     *@description: 得到购物方式的数据
     *@author: Mister Wang
     *@date: 2021-01-05 17:24:07
    */
    handleMethod(val) {
      this.handleChange(val)
      if(this.paypalMethod > 0) {
        this.collconfig[1].isComplite = true;
      }
    },
    /**
     *@param: val >> 展开索引
     *@description: 切换展开
     *@author: Mister Wang
     *@date: 2021-01-05 17:22:48
    */
    handleChange(val) {
      if(this.collconfig[val].isOpen) {
        this.collconfig[val].isOpen = false;
      } else {
        this.collconfig[val].isOpen = true;
      }
    },
    /**
     *@param: val >> 展开索引
     *@description: 点击编辑
     *@author: Mister Wang
     *@date: 2021-01-05 17:23:16
    */
    handleEdit(val){
      this.collconfig[val].isComplite = false;
      this.collconfig[val].isOpen = true;
    },
    /**
     *@param: 地址信息
     *@description: 提交表单
     *@author: Mister Wang
     *@date: 2021-01-05 17:23:35
    */
    submitForm(formName) {
      let self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleChange(0);
          this.collconfig[0].isComplite = true;
          this.collconfig[0].isOpen = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>
<style lang="scss">

</style>
